<template>
  <view>
    <!-- 平分 -->
    <view class="top">
      <scroll-view scroll-x class="nav">
        <view class="flex text-center">
          <view
            class="cu-item flex-sub"
            :class="k == TabCur ? 'gold cur' : ''"
            v-for="(i, k) in tabs"
            :key="k"
            @tap="tabSelect"
            :data-id="k"
          >
            {{ i.text }}
          </view>
        </view>
      </scroll-view>

      <view class="padding ipt">
        <view class="flex justify-between align-center gold">
          <view class="text-lg">{{ card ? card : "请输入19位加油卡号" }}</view>
          <image
            class="img"
            src="../../static/images/oil.png"
            mode="widthFix"
            @click="modal = !modal"
            v-show="oilCard.length"
          ></image>
          <image
            class="img"
            src="../../static/images/oil.png"
            mode="widthFix"
            @click="$goto('/pages/mine/oilcard')"
            v-show="!oilCard.length"
          ></image>
        </view>
        <view class="text-lg margin-top">{{ name ? name : "持卡人" }}</view>
      </view>

      <view class="drop-list bg-white" v-show="modal">
        <view v-show="TabCur == 0">
          <view
            class="item"
            v-if="i.type == '中国石油'"
            v-for="i in oilCard"
            :key="i.id"
            @click="choose(i)"
            >{{ i.card_no }}</view
          >
        </view>

        <view v-show="TabCur == 1">
          <view
            class="item"
            v-if="i.type == '中国石化'"
            v-for="i in oilCard"
            :key="i.id"
            @click="choose(i)"
            >{{ i.card_no }}</view
          >
        </view>
      </view>
    </view>

    <view class="cu-modal" :class="modal ? 'show' : ''" @click="modal = !modal">
    </view>

    <view class="main padding bg-white">
      <view class="flex justify-between align-center">
        <view class="text-bold text-lg"> 请选择充值金额 </view>
        <view class="flex align-center">
          <view class="text-bold">总计：</view>
          <view class="text-red" v-show="TabCur == 0">{{ price0 }}</view>
          <view class="text-red" v-show="TabCur == 1">{{ price1 }}</view>
        </view>
      </view>

      <view
        class="list grid col-3 margin-top margin-bottom-xl"
        v-show="TabCur == 0"
      >
        <view
          class="card-wrap flex justify-center padding-top"
          v-for="i in list0"
          :key="i.id"
          @click="
            (selected0 = i.id), (price0 = i.actual_price), (cardnum_id = i.id)
          "
        >
          <view class="card bg-img" :class="{ active: i.id == selected0 }">
            <view class="text-bold">{{ i.price }} 元</view>
            <view class="text-sm padding-top-xs"
              >售价 {{ i.actual_price }} 元</view
            >
          </view>
        </view>
      </view>

      <view
        class="list grid col-3 margin-top margin-bottom-xl"
        v-show="TabCur == 1"
      >
        <view
          class="card-wrap flex justify-center padding-top"
          v-for="i in list1"
          :key="i.id"
          @click="
            (selected1 = i.id), (price1 = i.actual_price), (cardnum_id = i.id)
          "
        >
          <view class="card bg-img" :class="{ active: i.id == selected1 }">
            <view class="text-bold">{{ i.price }} 元</view>
            <view class="text-sm padding-top-xs"
              >售价 {{ i.actual_price }} 元</view
            >
          </view>
        </view>
      </view>

      <view class="margin-top padding-tb padding-lr-xl">
        <my-btn
          class="block round"
          bg="linear-gradient(90deg, #dcbf86 0%,#c18a31 100% )"
          @click.native="paymentShow = true"
          >立即充值</my-btn
        >
        <my-btn
          class="block round"
          bg="transparent"
          color="#666666"
          @click.native="$goto('/pages/mine/record?type=oilcard')"
          >充值记录</my-btn
        >
      </view>
    </view>

    <!-- 支付 -->
    <my-payment
      :show="paymentShow"
      @close="paymentShow = false"
      payUrl="/card/oil/pay"
      :params="{ card_id: card_id, cardnum_id: cardnum_id }"
      @success="$goto('/pages/shop/paysuccess?type=oilcard')"
    ></my-payment>
  </view>
</template>

<script>
export default {
  data() {
    return {
      TabCur: 0,
      scrollLeft: 0,
      modal: false,
      card: "",
      name: "",
      tabs: [
        {
          id: 0,
          text: "中国石油",
        },
        {
          id: 1,
          text: "中国石化",
        },
      ],
      oilCard: [],
      selected0: "",
      price0: "",
      selected1: "",
      price1: "",
      list0: [],
      list1: [],
      card_id: "",
      cardnum_id: "",
      orderInfo: "",
      paymentShow: false,
    };
  },
  onShow() {
    this.getOilCard();
  },
  methods: {
    tabSelect(e) {
      this.TabCur = e.currentTarget.dataset.id;
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
      this.card = "";
      this.name = "";
      this.cardnum_id = "";
    },
    getOilCard() {
      this.$u.get("/card/oil").then((res) => {
        this.oilCard = res.data.result.oil_card;
        this.list0 = res.data.result.cardnum.中国石油;
        this.list1 = res.data.result.cardnum.中国石化;
      });
    },
    choose(card) {
      this.card_id = card.id;
      this.card = card.card_no;
      this.name = card.holder_name;
      this.modal = false;
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f4f4f4;
}

.nav {
  background-color: #1f1f1f;
  color: white;
}

.gold {
  color: #e0c899;
}

.cu-modal {
  z-index: 100;
}

.top {
  position: relative;
  z-index: 120;
}

.ipt {
  background-color: #1f1f1f;
  color: white;
  z-index: 120;

  .img {
    width: 50rpx;
    height: 50rpx;
  }
}

.drop-list {
  width: 100%;
  position: absolute;
  margin-top: -72rpx;

  .item {
    padding: 20rpx 30rpx;
    background-color: white;
    font-size: 40rpx;
    letter-spacing: 2rpx;
  }
}

.card {
  width: 200rpx;
  height: 128rpx;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background-image: url(../../static/images/oil1.png);

  &.active {
    background-image: url(../../static/images/oil2.png);
  }
}
</style>
